<template>
  <el-row>
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="菜单名称">
        <el-input v-model="queryForm.menuName" placeholder="请填写菜单名称"></el-input>
      </el-form-item>
      <el-form-item label="菜单状态">
        <el-select v-model="queryForm.status" placeholder="请选择菜单状态">
          <el-option label="正常" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button v-permission="'sys:menu:list'" type="primary" @click="onQuery">查询</el-button>
      </el-form-item>
    </el-form>
  </el-row>
  <el-row>
    <el-button v-permission="'sys:menu:add'" type="primary" :icon="Plus" @click="handleAddMenu">新增</el-button>
  </el-row>
  <el-row>
    <el-table
        :data="menuTableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all>
      <el-table-column prop="id" label="索引" width="220"/>
      <el-table-column prop="menuName" label="菜单名称" width="180"/>
      <el-table-column prop="icon" label="图标" width="180"/>
      <el-table-column prop="perms" label="权限标识" width="180"/>
      <el-table-column prop="url" label="组件路径" width="180"/>
      <el-table-column prop="status" label="状态 " width="180">
        <template #default="scope">
          <span v-if="scope.row.status === 1">正常</span>
          <span v-else>禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"/>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button v-permission="'sys:menu:edit'" size="small" @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button v-permission="'sys:menu:delete'" size="small" type="danger" @click="handleDelete(scope.$index,
          scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-row>

  <el-dialog v-model="dialogVisible">
    <mine-menu-add :all-menu="menuTableData" :menu-form-data="menuFormData"></mine-menu-add>
  </el-dialog>

</template>

<script>
import {onMounted, ref, getCurrentInstance} from "vue";
import * as menuApi from '@/api/system/menu/index.js'
import MineMenuAdd from "@/views/system/menu/components/mine-menu-add";
import {Plus} from '@element-plus/icons-vue';

import {ElMessage, ElMessageBox} from "element-plus"

export default {
  name: "index",
  components: {MineMenuAdd},
  setup() {
    const {proxy} = getCurrentInstance()
    const dialogVisible = ref(false)
    const menuTableData = ref([])
    const menuFormData = ref({})
    const queryForm = ref({})

    const handleInitMenuTableData = (params) => {
      menuApi.allRoutes(params).then(res => {
        if (res.success) {
          menuTableData.value = res.data
        } else {
          ElMessage({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    }

    const onQuery = () => {
      handleInitMenuTableData(queryForm.value)
    }

    const handleAddMenu = () => {
      menuFormData.value = {
        parentId: "220221AGYNK0PR68",
        menuType: "M",
        sort: 1,
        target: "menuItem",
        visible: "1",
        status: 1
      }
      dialogVisible.value = true
    }
    const handleEdit = (index, row) => {
      menuFormData.value = row
      dialogVisible.value = true
    }
    const handleDelete = (index, row) => {
      ElMessageBox.confirm(
          '确定要删除当前数据吗？',
          '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
        menuApi.removeById(row.id).then(res => {
          if (res.success) {
            ElMessage({
              message: res.msg,
              type: 'success',
            })
            handleInitMenuTableData()
          } else {
            ElMessage({
              message: res.msg,
              type: 'warning',
            })
          }
        })
      }).catch(() => {

      })
    }
    onMounted(() => {
      handleInitMenuTableData()
    })

    proxy.$bus.on('submitSuccess', data => {
      dialogVisible.value = false
      handleInitMenuTableData()
    })
    return {
      menuTableData,
      dialogVisible,
      menuFormData,
      queryForm,
      Plus,
      handleAddMenu,
      handleEdit,
      handleDelete,
      onQuery
    }
  }
}
</script>

<style scoped>

</style>
